<template>
  <a-card title="公告" :bordered="false" class="gi_card_title">
    <template #extra>
      <a-link href="/system/notice">更多</a-link>
    </template>
    <a-empty v-if="dataList.length === 0">暂无公告</a-empty>
    <a-comment
      v-for="(item, index) in dataList"
      :key="index"
      align="right"
      :class="`animated-fade-up-${index}`"
      style="overflow: hidden"
    >
      <template #content>
        <a-space>
            <a-tag v-if="!item.noticeType" error></a-tag>
            <a-tag v-else-if="item.noticeType === '1'" color="arcoblue">通知</a-tag>
            <a-tag v-else-if="item.noticeType === '2'" color="green">活动</a-tag>
          <a-link @click="onDetail(item.noticeId)">
            <a-typography-paragraph
              :ellipsis="{
                rows: 1,
                showTooltip: true,
                css: true,
              }"
            >
              {{ item.noticeTitle }}
            </a-typography-paragraph>
          </a-link>
        </a-space>
      </template>
    </a-comment>
  </a-card>

  <NoticeDetailModal ref="NoticeDetailModalRef" />
</template>

<script setup lang="ts">
import { lists } from '@/apis/system/notice'
import type * as T from '@/apis/system/type'
import NoticeDetailModal from '@/views/system/notice/NoticeDetailModal.vue'

const dataList = ref<T.NoticeResp[]>([])
// 查询列表数据
const getDataList = async () => {
  const res = await lists()
  dataList.value = res.data
}

const NoticeDetailModalRef = ref<InstanceType<typeof NoticeDetailModal>>()
// 详情
const onDetail = (id: string) => {
  NoticeDetailModalRef.value?.onDetail(id)
}

onMounted(() => {
  getDataList()
})
</script>

<style lang="scss" scoped>
:deep(.arco-comment:not(:first-of-type), .arco-comment-inner-comment) {
  margin-top: 10px;
}
:deep(.arco-comment-content) {
  font-size: 14px;
  color: var(--color-text-1);
}
:deep(.arco-comment-datetime) {
  color: var(--color-text-4);
}

.arco-link {
  color: rgb(var(--gray-8));
}

.icon {
  margin-right: 3px;
}

.update-time-row {
  text-align: right;
}
</style>
